<template>
  <el-dialog
    v-el-drag-dialog
    title="押金明细"
    :visible.sync="visible"
    width="1024px"
    @close="reset"
  >
    <div class="item">
      <div class="title">
        <span class="title-icon" />
        <span class="title-text">客户信息</span>
      </div>
      <el-descriptions size="medium">
        <el-descriptions-item label="用户名">asdoriookami</el-descriptions-item>
        <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
        <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">学校</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="item">
      <div class="title">
        <span class="title-icon" />
        <span class="title-text">押金信息</span>
      </div>
      <el-descriptions size="medium">
        <el-descriptions-item label="押金单号">590090</el-descriptions-item>
        <el-descriptions-item label="收款人">张三</el-descriptions-item>
        <el-descriptions-item label="收款时间">{{ '1632713596905' | parseTime('{y}/{m}/{d} {h}:{i}:{s}') }}</el-descriptions-item>
        <el-descriptions-item label="支付方式">现金</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">学校</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
      </el-descriptions>
    </div>
  </el-dialog>
</template>

<script>
  import { parseTime } from '@/filters'

  export default {
    name: 'detail',
    filters: {
      parseTime
    },
    data() {
      return {
        visible: false
      }
    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.temp = Object.assign(this.temp, temp)
            this.type = 'edit'
          }
        })
      },
      reset() {

      }
    }
  }
</script>

<style lang="scss" scoped>
  .item {
    margin-bottom: 58px;
    .title {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .title-icon {
        display: inline-block;
        width: 4px;
        height: 18px;
        margin-right: 6px;
        background: #01999f;
      }
      .title-text {
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-size: 14px;
        font-weight: 700;
        color: #01999f;
      }
      .content {
        margin-bottom: 58px;
      }
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>
